<template>
  <div class="app-container">
      <el-tabs type="border-card">
        <el-tab-pane label="厂牌">
 <!-- 厂牌 -->
            <div class="filter-container">
                <el-button type="primary" @click="brandEvent(1).addClick()">新增</el-button>
            </div>
            <el-table v-loading="brand.listLoading" :data="brand.list" 
                border fit highlight-current-row stripe 
                style="width: 100%">
                <el-table-column align="center" label="序" width="80">
                    <template slot-scope="scope">
                    <span>{{ scope.row._id }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="名称">
                    <template slot-scope="scope">
                    <span>{{ scope.row.reach }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="时间">
                    <template slot-scope="scope">
                    <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d} {h}:{i}')  }}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="操作"  width="120" fixed="right">
                    <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="brandEvent().tableRowDelete(scope.row.id)">修改</el-button>
                    
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="brand.total>0" :total="brand.total" :page.sync="brand.listQuery.page" :limit.sync="brand.listQuery.rows" @pagination="brandEvent().fetchData" />
<!-- end 厂牌 -->
        </el-tab-pane>
        <el-tab-pane label="车名">
 <!-- 车名 -->
            <div class="filter-container">
                <el-button type="primary" @click="brandEvent(2).addClick()">新增</el-button>
            </div>
            <el-table v-loading="carname.listLoading" :data="carname.list" 
                border fit highlight-current-row stripe 
                style="width: 100%">
                <el-table-column align="center" label="序" width="80">
                    <template slot-scope="scope">
                    <span>{{ scope.row._id }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="车名">
                    <template slot-scope="scope">
                    <span>{{ scope.row.reach }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="时间">
                    <template slot-scope="scope">
                    <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d} {h}:{i}')  }}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="操作"  width="120" fixed="right">
                    <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="brandEvent(2).tableRowDelete(scope.row.id)">修改</el-button>
                    
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="carname.total>0" :total="carname.total" :page.sync="carname.listQuery.page" :limit.sync="carname.listQuery.rows" @pagination="brandEvent(2).fetchData" />
<!-- end 车名 -->
        </el-tab-pane>
        <el-tab-pane label="车型编码">
 <!-- 车型编码 -->
 <div class="filter-container">
                <el-button type="primary" @click="brandEvent(3).addClick()">新增</el-button>
            </div>
            <el-table v-loading="carcode.listLoading" :data="carcode.list" 
                border fit highlight-current-row stripe 
                style="width: 100%">
                <el-table-column align="center" label="序" width="80">
                    <template slot-scope="scope">
                    <span>{{ scope.row._id }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="车型">
                    <template slot-scope="scope">
                    <span>{{ scope.row.reach }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="时间">
                    <template slot-scope="scope">
                    <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d} {h}:{i}')  }}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="操作"  width="120" fixed="right">
                    <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="brandEvent(3).tableRowDelete(scope.row.id)">修改</el-button>
                    
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="carcode.total>0" :total="carcode.total" :page.sync="carcode.listQuery.page" :limit.sync="carcode.listQuery.rows" @pagination="brandEvent(3).fetchData" />
<!-- end 车型编码 -->
        </el-tab-pane>
        <el-tab-pane label="外观颜色">
<!-- 外观颜色 -->
<div class="filter-container">
                <el-button type="primary" @click="brandEvent(4).addClick()">新增</el-button>
            </div>
            <el-table v-loading="carcolor.listLoading" :data="carcolor.list" 
                border fit highlight-current-row stripe 
                style="width: 100%">
                <el-table-column align="center" label="序" width="80">
                    <template slot-scope="scope">
                    <span>{{ scope.row._id }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="颜色">
                    <template slot-scope="scope">
                    <span>{{ scope.row.reach }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="时间">
                    <template slot-scope="scope">
                    <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d} {h}:{i}')  }}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="操作"  width="120" fixed="right">
                    <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="brandEvent(4).tableRowDelete(scope.row.id)">修改</el-button>
                    
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="carcolor.total>0" :total="carcolor.total" :page.sync="carcolor.listQuery.page" :limit.sync="carcolor.listQuery.rows" @pagination="brandEvent(4).fetchData" />
<!-- end 外观颜色 -->
        </el-tab-pane>
        <el-tab-pane label="返利项目">
<!-- 返利项目 -->
<div class="filter-container">
                <el-button type="primary" @click="brandEvent(5).addClick()">新增</el-button>
            </div>
            <el-table v-loading="rebate.listLoading" :data="rebate.list" 
                border fit highlight-current-row stripe 
                style="width: 100%">
                <el-table-column align="center" label="序" width="80">
                    <template slot-scope="scope">
                    <span>{{ scope.row._id }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="返利项目">
                    <template slot-scope="scope">
                    <span>{{ scope.row.reach }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="预计金额">
                    <template slot-scope="scope">
                    <span>{{ scope.row.reach }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="时间">
                    <template slot-scope="scope">
                    <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d} {h}:{i}')  }}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="操作"  width="120" fixed="right">
                    <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="brandEvent(5).tableRowDelete(scope.row.id)">修改</el-button>
                    
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="rebate.total>0" :total="rebate.total" :page.sync="rebate.listQuery.page" :limit.sync="rebate.listQuery.rows" @pagination="brandEvent(5).fetchData" />
<!-- end 返利项目 -->
        </el-tab-pane>
      </el-tabs>

<!-- 新增 -->
<el-dialog :title="dialogAdd.title" :visible.sync="dialogAdd.visible"  width="600px">
    <div class="ci">
       <div class="item" v-show="dialogAdd.type==1">
          <span class="name">厂牌：</span>
          <span class="value">
              <el-input  v-model="dialogAdd.data.brandname" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
      <div class="item" v-show="dialogAdd.type==2">
          <span class="name">车名：</span>
          <span class="value">
              <el-input  v-model="dialogAdd.data.carname" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
      <div class="item" v-show="dialogAdd.type==3">
          <span class="name">车型编码：</span>
          <span class="value">
              <el-input  v-model="dialogAdd.data.carcode" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
      <div class="item" v-show="dialogAdd.type==4">
          <span class="name">外观颜色：</span>
          <span class="value">
              <el-input  v-model="dialogAdd.data.carcolor" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
      <div class="item" v-show="dialogAdd.type==5">
          <span class="name">返利项目：</span>
          <span class="value">
              <el-input  v-model="dialogAdd.data.rebateitem" placeholder="" style="width:180px;" ></el-input>
          </span>
          <span class="name">预计返利金额：</span>
          <span class="value">
              <el-input  v-model="dialogAdd.data.rebatemoney" placeholder="" style="width:180px;" ></el-input>
          </span>
      </div>

    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAdd.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogAddClick().save()" :loading="dialogAdd.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end  新增 -->

  </div>
</template>

<script>
import * as carPurchaseApi from '@/api/cars/purchase'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'
import {objectMerge,objectEmpty} from '@/utils/index'

export default {
    components:{
        
    },
    data(){
        return {
            brand:{
                list:null,
                listLoading:false,
                listQuery: {
                    page: 1,
                    rows: 20,
                },
                total:0,
            },
            carname:{
                list:null,
                listLoading:false,
                listQuery: {
                    page: 1,
                    rows: 20,
                },
                total:0,
            },
            carcode:{
                list:null,
                listLoading:false,
                listQuery: {
                    page: 1,
                    rows: 20,
                },
                total:0,
            },
            carcolor:{
                list:null,
                listLoading:false,
                listQuery: {
                    page: 1,
                    rows: 20,
                },
                total:0,
            },
            rebate:{
                list:null,
                listLoading:false,
                listQuery: {
                    page: 1,
                    rows: 20,
                },
                total:0,
            },

            dialogAdd:{
                visible:false,
                saveloading:false,
                title:'',
                type:'',
                data:{
                    brandname:'',
                    carname:'',
                    carcode:'',
                    carcolor:'',
                    rebateitem:'',
                    rebatemoney:''
                }
            }
        }
    },
    created(){

    },
    methods:{
        brandEvent(type){
            var that=this;
            var dg=that.dialogAdd;
            var titles=['','厂牌','车名','车型编码','外观颜色','返利项目'];
            return {
                addClick(){
                    objectEmpty(dg.data);
                    dg.type=type;
                    dg.visible=true;
                    dg.title='新增-'+titles[type]
                },
                tableRowDelete(id){

                },
                fetchData(){

                }
            }
        },

        dialogAddClick(){
            var that=this;
            var dg=that.dialogAdd;
            return {
                save(){
                    dg.visible=false;
                }
            }
        },
    }
}
</script>

<style>

</style>